$(function () {
    // header部分hover效果
    $('.region-selection, .login a, .register a, .collection a').mouseenter(function () {
        $(this).css({ 'color': '#fc3' });
    }).mouseleave(function () { $(this).css({ 'color': 'black' }) });

    // 点击 登录/注册 跳转至相应页面
    $('.login a').click(function () {
        setTimeout(function () {
            location.href = './login/login.html';
        }, 1500)
    })
    $('.register a').click(function () {
        setTimeout(function () {
            location.href = './register/register.html';
        }, 1500)
    })

    // 导航栏二级菜单显隐效果
    $('.nav-item').hover(function () {
        $(this).find('.nav-unfold').slideToggle(500);
    })
    $('.nav-item li').find('a').click(function () {
        // console.log(422)
        setTimeout(function () {
            location.href = './goodlist.html';
        }, 1500)
    })


    var key = "";
    var shownum = 2;
    var showpage = 2;
    var pageIndex = 2;
    var orderkey = "id";
    var rankkey = "asc";
    var orderList = $(".order");
    var rankList = $(".rank");

    var btn = document.getElementById("btn");
    var searchInput = document.getElementById("msg");
    var setpagenumSelect = document.getElementById("setpagenum");
    var setshowpageSelect = document.getElementById("setshowpage");


    setshowpageSelect.onchange = function () {
        showpage = this.value;
        setPage(key, shownum, showpage);
    }
    setpagenumSelect.onchange = function () {
        shownum = this.value;
        setPage(key, shownum, showpage);
    }
    btn.onclick = function () {
        key = searchInput.value;
        getData();
        setPage(key, shownum, showpage);
    }


    for (var i = 0; i < orderList.length; i++) {
        orderList[i].onclick = function () {
            // console.log(34234)
            orderkey = this.getAttribute('data-value');
            getData();
            // console.log(orderkey)
        }
    }
    for (var i = 0; i < rankList.length; i++) {
        rankList[i].onclick = function () {
            // console.log('ddffgfdg')
            rankkey = this.getAttribute('data-value');
            getData();
            // console.log(rankkey)
        }
    }

    // var config = { url: "http://lk1299117937.gz01.bdysite.com/" };

    setPage(key, shownum, showpage);
    function setPage(key, shownum, showpage) {
        $.ajax({
            type: "get",
            // url: "http://localhost/Secoo/php/countgoodsinfo.php",
            url: "http://lk1299117937.gz01.bdysite.com/Secoo/php/countgoodsinfo.php",
            data: {
                key: key,
            },
            dataType: "json",
            success: function (res) {
                //alert(obj.count);
                new Page("#page", {
                    count: res.count,
                    shownum: shownum,
                    showpage: showpage,
                    // prevHtml: "prev",
                    callBack: function (pageIndex) {
                        getData(key, shownum, pageIndex);
                    }
                })
            }
        })
    }

    getData(key, shownum, pageIndex);
    function getData(key, shownum, pageIndex) {
        $.ajax({
            type: "get",
            // url: "http://localhost/Secoo/php/goodlist.php",
            url: "http://lk1299117937.gz01.bdysite.com/Secoo/php/goodlist.php",
            data: {
                key: key,
                orderkey: orderkey,
                rankkey: rankkey,
                shownum: shownum,
                skipnum: shownum * (pageIndex - 1)
            },
            dataType: "json",
            success: function (res) {
                $('.sui_tips .msg-success').show(1000);
                setTimeout(function () {
                    $('.sui_tips .msg-success').hide(1000);
                }, 3000);
                console.log(res);
                var html = '';
                res.forEach(item => {
                    let { id, goodsname, goodsprice, goodsnum, goodssmallimg } = item;
                    html += `<div class="tr" data-id="${id}">
                                <img src="images/${goodssmallimg}1.jpg" alt="">
                                <p>${goodsname}</p>
                                <span>价格 ￥${goodsprice}</span><span>数量 ${goodsnum} 件</span>
                            </div>`;
                })
                $('.pruduct_list').html(html);
            },
            error: function () {
                $('.sui_tips .msg-error').show(1000);
                setTimeout(function () {
                    $('.sui_tips .msg-error').hide(1000);
                }, 3000);
            },
        })
    }

    document.onclick = function (e) {
        switch (e.target.parentNode.className) {
            case "tr":
                // alert(e.target.parentNode.getAttribute("data-id"));
                var id = e.target.parentNode.getAttribute("data-id");
                window.location.href = "detail.html?id=" + id;
                break;

        }
    }

})